import React, { useState, useEffect } from'react';
import './register.css';
import background from '../../assets/background.jpg';
import plane from '../../assets/plane.png';
import { ImageUploader, Toast } from 'antd-mobile';
import { useNavigate } from'react-router-dom';
import { register} from '../../api/register'; // 引入封装的接口
import { uploadFile } from '../../api/issueApi';
import { imgUrl } from '../../config'; // 导入imgUrl
/**
 * 注册页面组件
 * 提供用户注册功能，包括表单填写、头像上传、注册提交等功能
 */
const RegisterPage = () => {
    const navigate = useNavigate();
    
    // 表单字段状态
    const [nickname, setNickname] = useState(''); // 用户昵称
    const [tel, setTel] = useState(''); // 手机号
    const [password, setPassword] = useState(''); // 密码
    const [serial, setSerial] = useState(''); // 编号（非必填）
    const [sex, setSex] = useState(1); // 性别，1为男，2为女
    const [imgUrl, setImgUrl] = useState(''); // 用户头像URL

    // 提示信息状态
    const [showHintBig, setShowHintBig] = useState(false);
    const [showFormat, setShowFormat] = useState(false);
    const [showCorrect, setShowCorrect] = useState(false);
    const [showForgetPass, setShowForgetPass] = useState(false);

    // 图片上传状态
    const [fileList, setFileList] = useState([]); // 图片文件列表

    /**
     * 处理图片上传
     * @param {File} file - 要上传的图片文件
     */
    const handleUpload = (file) => {
        uploadFile(file) 
           .then(res => {
                if (res.code === 1) {
                    // 构建完整的图片URL并更新状态
                    const url =`${imgUrl}${res.data.url}`;
                    setImgUrl(url);
                    setFileList([{ url }]);
                    console.log('图片上传成功:', url);
                    console.log('接口响应数据:', res);
                } else {
                    // 显示上传失败提示
                    console.log('图片上传失败:', res.msg);
                    Toast.show({
                        content: '图片上传失败',
                        position: 'top',
                        duration: 2000
                    });
                }
            })
           .catch(error => {
                // 处理上传异常
                console.log('上传失败!', error);
                Toast.show({
                    content: '上传失败',
                    position: 'top',
                    duration: 2000
                });
            });
    };

    /**
     * 节流函数，限制函数调用频率
     * @param {Function} func - 要节流的函数
     * @param {number} limit - 限制的时间间隔（毫秒）
     * @returns {Function} - 节流后的函数
     */
    const throttle = (func, limit) => {
        let lastFunc;
        let lastRan;
        return function () {
            const context = this;
            const args = arguments;
            if (!lastRan) {
                func.apply(context, args);
                lastRan = Date.now();
            } else {
                clearTimeout(lastFunc);
                lastFunc = setTimeout(() => {
                    if ((Date.now() - lastRan) >= limit) {
                        func.apply(context, args);
                        lastRan = Date.now();
                    }
                }, limit - (Date.now() - lastRan));
            }
        };
    };

    /**
     * 处理注册提交
     * 使用throttle函数限制点击频率，防止重复提交
     */
    const handleRegister = throttle(() => {
        // 验证表单完整性
        if (!nickname ||!tel ||!password) {
            Toast.show({
                content: '请填写完整信息',
                position: 'top',
                duration: 2000
            });
            return;
        }
        
        // 验证手机号格式
        if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(tel))) {
            Toast.show({
                content: '账号格式不正确',
                position: 'top',
                duration: 2000
            });
            return;
        }
        
        // 验证是否上传了头像
        if (!imgUrl) {
            Toast.show({
                content: '请上传头像',
                position: 'top',
                duration: 2000
            });
            return;
        }

        // 调用注册API
        register(nickname, tel, password, sex, imgUrl, serial)
           .then(res => {
                console.log(res);
                if (res.code === 1) {
                    // 注册成功提示并清空表单
                    Toast.show({
                        content: '添加成功',
                        position: 'top',
                        duration: 2000
                    });
                    setNickname('');
                    setTel('');
                    setPassword('');
                    setSerial('');
                    setImgUrl('');
                    setFileList([]); // 注册成功后清空 fileList
                    setShowForgetPass(true);
                    navigate("/login"); // 注册成功后跳转到登录页面
                } else if (res.msg === "该手机号已注册") {
                    // 手机号已注册提示
                    Toast.show({
                        content: '该手机号已注册',
                        position: 'top',
                        duration: 2000
                    });
                }
            })
           .catch(error => {
                // 处理注册异常
                console.log('注册失败', error);
            });
    }, 2000);





    // 选择性别为男
    const handleBoy = () => {
        setSex(1);
    };

    // 选择性别为女
    const handleGril = () => {
        setSex(2);
    };

    return (
        <div className="big">
            {/* 背景图片 */}
            <img className="back" src={background} alt="" />
            
            {/* 装饰性飞机图片 */}
            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <img className="aircraft" src={plane} alt="" />
            </div>
            
            {/* 注册表单容器 */}
            <div className="second">
                {/* 头像上传组件 */}
                <div style={{ width: '100%', textAlign: 'center' }}>
                    <ImageUploader
                        style={{ display: 'inline-block', paddingTop: '20px' }}
                        value={fileList}
                        onChange={setFileList}
                        upload={handleUpload}
                        maxCount={1}  // 限制只能上传一张图片
                        className="circle-uploader"  // 添加自定义类名
                    />
                </div>
                
                {/* 输入表单 */}
                <div className="secondinput">
                    {/* 昵称输入框 */}
                    <input
                        type="text"
                        placeholder="请输入昵称"
                        value={nickname}
                        onChange={(e) => setNickname(e.target.value)}
                        onKeyUp={(e) => e.target.value = e.target.value.replace(/\s+/g, '')}
                    />
                    
                    {/* 手机号输入框 */}
                    <input
                        type="tel"
                        placeholder="请输入手机号"
                        value={tel}
                        onChange={(e) => setTel(e.target.value)}
                        onKeyUp={(e) => e.target.value = e.target.value.replace(/\s+/g, '')}
                    />
                    
                    {/* 密码输入框 */}
                    <input
                        type="password"
                        placeholder="请输入密码"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        onKeyUp={(e) => e.target.value = e.target.value.replace(/\s+/g, '')}
                    />
                    
                    {/* 编号输入框（非必填） */}
                    <input
                        type="tel"
                        placeholder="请输入编号(非必填)"
                        value={serial}
                        onChange={(e) => setSerial(e.target.value)}
                        onKeyUp={(e) => e.target.value = e.target.value.replace(/\s+/g, '')}
                    />
                </div>
                
                {/* 性别选择和前往登录链接 */}
                <div className="radio">
                    <div className="radio-sex">
                        {/* 男性选择 */}
                        <input
                            type="radio"
                            className="boy"
                            onChange={handleBoy}
                            id="sex-box"
                            value="1"
                            name="1"
                            checked={sex === 1}
                        />
                        <label htmlFor="show">男</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        
                        {/* 女性选择 */}
                        <input
                            className="gril"
                            onChange={handleGril}
                            id="sex-grill"
                            type="radio"
                            value="2"
                            name="1"
                            checked={sex === 2}
                        />
                        <label htmlFor="noshow">女</label>
                    </div>
                    
                    {/* 前往登录页面链接 */}
                    <span onClick={() => navigate("/login")}>前往登录</span>
                </div>
                
                {/* 注册按钮 */}
                <div className="register" id="reg" onClick={handleRegister}>
                    <p>注册</p>
                </div>
            </div>
            
            {/* 页脚版权信息 */}
            <div className="font">
                <span>@版权归大喇叭编程实训基地所有</span>
            </div>
        </div>
    );
};

export default RegisterPage;